<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>STK地形-显示等高线-等高线渲染-超图API</title>
    <meta>
    <link rel="stylesheet" href="../libs/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="../libs/supermap/pretty.css">
    <script type="text/javascript" src="../libs/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../libs/supermap/SuperMap.Include.js"></script>
    <script type="text/javascript" src="../libs/jquery/require.min.js" data-main="../libs/supermap/main"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000000;
        }

        .cesium-viewer-bottom {
            display: none;
        }
    </style>

</head>

<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<script>
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer', {
            animation: true,
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
                url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
            })
        });
        $('#loadingbar').remove();

        var scene = viewer.scene;
        var terrainProvider = new Cesium.CesiumTerrainProvider({
            url: 'https://assets02.agi.com/stk-terrain/v1/tilesets/world/tiles',
            //请求水波纹效果
            requestWaterMask: true,
            //请求照明
            requestVertexNormals: true
        });
        viewer.terrainProvider = terrainProvider;

        //设置相机视角
        viewer.scene.camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(86.7811, 27.6564, 5358.7096),
            orientation: {
                heading: 0.34555839949062594,
                pitch: -0.1422794351856307,
                roll: 0.0009471063581933947
            }
        });

        //创建分层设色对象
        var hyp = new Cesium.HypsometricSetting();

        //设置分层设色的显示模式为线
        hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.LINE;

        //设置线颜色为红色
        hyp.LineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);

        //等高线间隔为200m
        hyp.LineInterval = 200.0;

        //设置分层设色的最大/最小可见高度
        hyp.MaxVisibleValue = 9000;
        hyp.MinVisibleValue = 0;

        //设置分层设色颜色表的最大/最小key值,表示在此高度范围内显示颜色表
        hyp.ColorTableMinKey = 1;
        hyp.ColorTableMaxKey = 9000;

        //新建颜色表
        var colorTable = new Cesium.ColorTable();
        var height = 0;
        //每隔100m向颜色表插入一个随机色
        for (var i = 0; i < 90; i++) {
            height += 100;
            colorTable.insert(height, getRandomColor());
        }
        //设置分层设色的颜色表
        hyp.ColorTable = colorTable;

        //设置分层设色的透明度
        hyp.Opacity = 0.8;

        //返回随机颜色
        function getRandomColor() {
            return new Cesium.Color(0, Math.random(), Math.random());
        }

        viewer.scene.globe.HypsometricSetting = {
            hypsometricSetting: hyp,
            analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
        };

        // ========================================================

        // 1、取消专题显示
        // viewer.scene.globe.HypsometricSetting = undefined;

        // 2、等高线
        // hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.LINE; //显示模式
        // viewer.scene.globe.HypsometricSetting = {
        //     hypsometricSetting: hyp,
        //     analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION //分析范围模式
        // };

        // 3、等高面
        // hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
        // viewer.scene.globe.HypsometricSetting = {
        //     hypsometricSetting: hyp,
        //     analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
        // };

        // 4、线面
        // hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE_AND_LINE;
        // viewer.scene.globe.HypsometricSetting = {
        //     hypsometricSetting: hyp,
        //     analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
        // };

        // 总结
        // 分析范围模式
        // Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL // 全球
        // Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION // 局部,需要指定CoverageArea参数

        // 显示模式
        // Cesium.HypsometricSettingEnum.DisplayMode.LINE; // 线
        // Cesium.HypsometricSettingEnum.DisplayMode.FACE; // 面
        // Cesium.HypsometricSettingEnum.DisplayMode.FACE_AND_LINE; // 线面
    }


</script>
</body>

</html>